<template>
  <div class="ze-tabs">
    <div ref="headerRef" class="tabs-header">
      <div
        v-for="(item, index) in tabs"
        :key="index"
        class="tab"
        :class="{ active: value === index }"
        :style="{ color: value === index ? activeColor : '' }"
        @click="$emit('input', index)"
      >
        {{ item.title }}
      </div>

      <!-- 指示条 -->
      <div
        v-show="!!indicatorLeft"
        class="indicator"
        :style="indicatorStyle"
      ></div>
    </div>

    <swiper
      :duration="300"
      :current="value"
      :style="{ height: scrollViewHeight }"
      @change="(e) => $emit('input', e.detail.current)"
    >
      <swiper-item
        v-for="(item, index) in tabs"
        :key="index"
        class="swiper-item"
      >
        <scroll-view
          :scroll-y="true"
          class="scroll-view"
          :refresher-enabled="item.refresherEnabled"
          :refresher-triggered="item.refresherTriggered"
          @scrolltolower="$emit('scrolltolower', index)"
          @refresherrefresh="$emit('refresherrefresh', index)"
        >
          <slot :name="item.name"></slot>
          <!-- 占位空白 -->
          <div class="blank"></div>
        </scroll-view>
      </swiper-item>
    </swiper>
  </div>
</template>

<script>
import { getDeviceInfo } from '@/utils/storage'
import { queryRect } from '@/utils/query-rect'

export default {
  props: {
    tabs: {
      type: Array,
      default: () => [],
    },
    activeColor: {
      type: String,
      default: '#739ECA',
    },
    indicatorWidth: {
      type: String,
    },
    refresherEnabled: {
      type: Boolean,
      default: false,
    },
    value: {
      type: Number,
      default: 0,
    },
    /** 是否去除底部 tabbar 高度 */
    excludeTabbar: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      scrollViewHeight: '',
      indicatorLeft: '',
      tabHeaderHeight: 46, // tabHeader 高度
    }
  },
  computed: {
    indicatorStyle() {
      return `
        left: ${this.indicatorLeft};
        width: ${this.indicatorWidth};
        background-color: ${this.activeColor};
      `
    },
  },
  watch: {
    value: {
      immediate: true,
      handler() {
        Promise.resolve().then(() => {
          this.calcIndicatorPos()
        })
      },
    },
  },
  mounted() {
    this.calcScrollViewHeight()
  },
  methods: {
    /** 动态计算滚动容器高度 */
    calcScrollViewHeight() {
      const { safeAreaInsets, screenHeight, statusBarHeight, navbarHeight }
        = getDeviceInfo()

      // 获取 tab-header 高度，并计算滚动容器的高度
      queryRect('.tabs-header', this).then((res) => {
        this.tabHeaderHeight = res[0].height
        this.scrollViewHeight = `${
          screenHeight - statusBarHeight - navbarHeight - this.tabHeaderHeight - safeAreaInsets.bottom - (this.excludeTabbar ? 50 : 0)
        }px`
      })
    },
    /** 计算指示条的位置 */
    calcIndicatorPos() {
      queryRect('.active', this).then((res) => {
        this.indicatorLeft = `${res[0].width / 2 + res[0].left}px`
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.ze-tabs {
  .tabs-header {
    display: flex;
    position: relative;

    .tab {
      flex: 1;
      text-align: center;
      padding: 12px 0;
      color: #999;

      &.active {
        color: $uni-color-primary;
      }
    }

    .indicator {
      position: absolute;
      width: 50px;
      height: 1px;
      bottom: 0;
      background-color: $uni-color-primary;
      transition: all 0.3s;
      transform: translateX(-50%);
    }
  }

  .swiper-item {
    height: 100%;
    .scroll-view {
      height: 100%;
      .blank {
        height: 30px;
      }
    }
  }
}
</style>
